<template>
  <div class="container">
    <div class="row">
      <div class="col-3">
        <div class="card">
          <div class="card-body">
            <img :src="$store.state.user.photo" style="width: 100%">
          </div>
        </div>
      </div>
      <div class="col-9"> 
        <div class="card">
          <div class="card-header">
            <span>我的Bot</span>
            <button type="button" class="btn btn-primary float-end" data-bs-toggle="modal" data-bs-target="#add-bot-btn">创建Bot</button>
            <!-- Modal -->
            <div class="modal fade" id="add-bot-btn" tabindex="-1">
              <div class="modal-dialog modal-xl">
                <div class="modal-content">
                  <div class="modal-header">
                    <h1 class="modal-title fs-5" id="exampleModalLabel">创建Bot</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                  </div>
                  <div class="modal-body">
                    <div class="mb-3">
                      <label for="add-bot-title" class="form-label">名称</label>
                      <input v-model="botadd.title" type="text" class="form-control" id="add-bot-title" placeholder="请输入Bot名称">
                    </div>
                    <div class="mb-3">
                      <label for="add-bot-description" class="form-label">简介</label>
                      <textarea v-model="botadd.description" class="form-control" id="add-bot-description" rows="3" placeholder="请输入Bot简介"></textarea>
                    </div>
                    <div class="mb-3">
                      <label for="add-bot-code" class="form-label">代码</label>
                      <VAceEditor
                      v-model:value="botadd.content"
                      @init="editorInit"
                      lang="c_cpp"
                      theme="textmate"
                      style="height: 300px" />
                    </div>
                  </div>
                  <div class="modal-footer">
                    <div class="error_message">{{ botadd.error_message }}</div>
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button @click="add_bot" type="button" class="btn btn-primary">创建</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="card-body">
            <table class="table table-hover">
              <thead>
                <tr>
                  <td>名称</td>
                  <td>创建时间</td>
                  <td>操作</td>
                </tr>
              </thead>
              <tbody>
                <tr v-for="bot in bots" :key="bot.id">
                  <td>{{bot.title}}</td>
                  <td>{{bot.createTime}}</td>
                  <td>
                    <button type="button" class="btn btn-primary" style="margin-right:20px" data-bs-toggle="modal" :data-bs-target="'#update-bot-btn'+bot.id">修改</button>
                    <!-- Modal -->
                    <div class="modal fade" :id="'update-bot-btn'+bot.id" tabindex="-1">
                      <div class="modal-dialog modal-xl">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h1 class="modal-title fs-5" id="exampleModalLabel">修改Bot</h1>
                            <button @click="refresh_bots" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                          </div>
                          <div class="modal-body">
                            <div class="mb-3">
                              <label for="add-bot-title" class="form-label">名称</label>
                              <input v-model="bot.title" type="text" class="form-control" id="add-bot-title" placeholder="请输入Bot名称">
                            </div>
                            <div class="mb-3">
                              <label for="add-bot-description" class="form-label">简介</label>
                              <textarea v-model="bot.description" class="form-control" id="add-bot-description" rows="3" placeholder="请输入Bot简介"></textarea>
                            </div>
                            <div class="mb-3">
                              <label for="add-bot-code" class="form-label">代码</label>
                              <VAceEditor
                              v-model:value="bot.content"
                              @init="editorInit"
                              lang="c_cpp"
                              theme="textmate"
                              style="height: 300px" />
                            </div>
                          </div>
                          <div class="modal-footer">
                            <div class="error_message">{{ bot.error_message }}</div>
                            <button @click="refresh_bots" type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                            <button @click="update_bot(bot)" type="button" class="btn btn-primary">保存修改</button>
                          </div>
                        </div>
                      </div>
                    </div>
                    <button @click="move_bot(bot.id)" type="button" class="btn btn-danger">删除</button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {ref,reactive} from "vue";
import {useStore} from "vuex";
import $ from "jquery";
import { Modal } from "bootstrap/dist/js/bootstrap";
import { VAceEditor } from 'vue3-ace-editor';
import ace from 'ace-builds';
export default {
  components: {
    VAceEditor,
  },

  setup() {
    ace.config.set(
    "basePath", 
    "https://cdn.jsdelivr.net/npm/ace-builds@" + require('ace-builds').version + "/src-noconflict/")

    const store = useStore();
    let bots = ref([]);

    const botadd=reactive({
      title:"",
      description:"",
      content:"",
      error_message:""
    });
    const refresh_bots=()=>{
      $.ajax({
        url:"http://localhost:3000/user/bot/getlist/",
        type:"get",
        headers:{
          Authorization:"Bearer "+store.state.user.token,
        },    
        success(resp){ 
          bots.value = resp;
        },
        error(resp){ 
          console.log(resp);
        }
      })
    }
    refresh_bots();
    const add_bot=()=>{
      botadd.error_message="";
      $.ajax({
        url:"http://localhost:3000/user/bot/add/",
        type:"post",
        data:{
          title:botadd.title,
          description:botadd.description,
          content:botadd.content,
        },
        headers:{
          Authorization:"Bearer "+store.state.user.token,
        },    
        success(resp){ //这里的成功指代码成功运行
          if(resp.error_message === "success"){
            botadd.title="";
            botadd.description="";
            botadd.content="";
            Modal.getInstance("#add-bot-btn").hide(); //关闭模态框
            refresh_bots(); //刷新列表
          }else{
            botadd.error_message = resp.error_message;
          }
        }
      })
    }
    const move_bot=(bot_id)=>{
      $.ajax({
        url:"http://localhost:3000/user/bot/remove/",
        type:"post",
        data:{
          bot_id:bot_id,
        },
        headers:{
          Authorization:"Bearer "+store.state.user.token,
        },    
        success(resp){ //这里的成功指代码成功运行
          if(resp.error_message === "success"){
            refresh_bots(); //刷新列表
          }else{
            botadd.error_message = resp.error_message;
          }
        }
      })
    }
    const update_bot=(bot)=>{
      bot.error_message="";
      $.ajax({
        url:"http://localhost:3000/user/bot/update/",
        type:"put",
        data:{
          bot_id:bot.id, //因为在后端的service中，也传入了这个参数
          title:bot.title,
          description:bot.description,
          content:bot.content,
        },
        headers:{
          Authorization:"Bearer "+store.state.user.token,
        },    
        success(resp){ //这里的成功指代码成功运行
          if(resp.error_message === "success"){
            Modal.getInstance('#update-bot-btn'+bot.id).hide(); //关闭模态框
            refresh_bots(); //刷新列表
          }else{
            bot.error_message = resp.error_message;
            
          }
        }
      })
    }
    return {
      refresh_bots,
      bots,
      botadd,
      add_bot,
      move_bot,
      update_bot,
    }
  }
}
</script>

<style scoped>
.card {
  margin-top: 20px;
}
.card-header>span {
  font-size: 130%;
}
.error_message {
  color: red;
}
</style>